<template>
	<view class="layout">
		<u-navbar title="我的预约"></u-navbar>
		<scroll-view class="scroll-view-box goods-list" scroll-y>
			<view @click="handleClick(item)" class="goods-item" v-for="(item, item_index) in goodsData"
				:key="item_index">
				<u-image class="goods-img" :src="item.img" border-radius="8rpx 0 0 8rpx" mode="aspectFill"
					width="162rpx" height="240rpx">
					<u-loading slot="loading"></u-loading>
				</u-image>
				<view class="goods-desc">
					<view class="goods-title">
						{{ item.title }}
					</view>
					<view class="goods-detail">
						<view>{{ item.detail}}</view>
					</view>
					<view class="goods-actions">
						<view class="tags">
							<u-tag class="mytag" v-for="(tag,tagIndex) in (item.tags)" :text="tag.text" mode="dark"
								:bg-color="tag.bgColor" :color="tag.color" :key="tagIndex" />
						</view>
						<view class="actions">
							<u-button @click="openGameLink(item)" :custom-style="actionBtnStyle">进入</u-button>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-loadmore bg-color="transparent" style="padding:40rpx 0" :status="status" @loadmore="getGoodsFun()"
			icon-type="iconType" />
	</view>
</template>
<script>
	import {
		getGoodsList
	} from "@/api/goods.js";
	export default {
		title: "我的收藏",
		components: {
		},
		data() {
			return {
				actionBtnStyle: {
					'width': '76rpx',
					'height': '44rpx',
					'background': '#009688',
					'border': 'none',
					'font-size': '22rpx',
					'font-family': 'PingFangSC, PingFang SC',
					'font-weight': '600',
					'color': '#FFFFFF'
				},
				status: 'nomore',
				params: {
					pageNumber: 1,
					pageSize: 10,
					categoryId: "",
				},
				goodsData: [{
						"id": "166083274790266470611",
						"goodsId": "16565533967302574091",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使,被误认为是我们地球的星际大使。",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '二次元',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, {
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}],
					},
					{
						"id": "166083274790266470612",
						"goodsId": "16565533967302574092",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误使。",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '惊悚',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, {
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}],
					}, {
						"id": "166083274790266470613",
						"goodsId": "16565533967302574093",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使被误认为是我们地球的星际大使",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}, {
							text: '逃杀/求生',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, ],
					}, {
						"id": "166083274790266470614",
						"goodsId": "16565533967302574094",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自。",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '二次元',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, {
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}],
					}, {
						"id": "166083274790266470615",
						"goodsId": "16565533967302574095",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使。",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '二次元',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, {
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}],
					}, {
						"id": "166083274790266470616",
						"goodsId": "16565533967302574096",
						"price": 260,
						"title": "地球特派员",
						"desc": "毁灭之态，拯救地球",
						"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使。",
						"tagline": '2月14日 浪漫来袭',
						"img": "https://cdn.osisx.com/images/img3.png",
						"icon": "https://cdn.osisx.com/images/img3.png",
						"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
						"make": "迪斯尼DISENEY",
						"publish": "@MINDSPARK境由心动",
						"typeName": "探索更多",
						"tags": [{
							text: '二次元',
							color: '#4C4141',
							bgColor: '#EDEDED'
						}, {
							text: '烂漫',
							color: '#E11E7E',
							bgColor: '#FAF0F4'
						}],
					},
				], //循环内容
			};
		},
		props: [],
		watch: {},
		mounted() {
			// this.initGoods()
		},
		/**
		 * 触底加载
		 */
		onReachBottom() {
			this.getGoodsFun()
		},
		destroyed() {
			uni.$off('onReachBottom')
		},
		methods: {
			// 打开游戏链接
			openGameLink(item) {
				// uni.navigateTo({
				// 	url: "/pages/tabbar/home/web-view?src=" + item.link,
				// });
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${item.id}`,
				});
			},
			handleClick(detail) {
				// 进入游戏首页,根据游戏id获取首页详情
				uni.navigateTo({
					url: `/pages/game/home/index?goodsId=${detail.id}`,
				});
			},
			async initGoods() {
				const res = await getGoodsList(this.params);
				if (res.data.success) {
					const result = res.data.result.records
					this.goodsData.push(...result);
				}
			},
			getGoodsFun(id) {
				this.status = 'loading';
				let resultData = [{
					"id": "16608327479026647061422",
					"goodsId": "1656553396730257409422",
					"price": 260,
					"title": "地球特派员",
					"desc": "毁灭之态，拯救地球",
					"detail": "一个叫埃利奥的男孩发现自。",
					"tagline": '2月14日 浪漫来袭',
					"img": "https://cdn.osisx.com/images/img3.png",
					"icon": "https://cdn.osisx.com/images/img3.png",
					"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
					"make": "迪斯尼DISENEY",
					"publish": "@MINDSPARK境由心动",
					"typeName": "探索更多",
					"tags": [{
						text: '二次元',
						color: '#4C4141',
						bgColor: '#EDEDED'
					}, {
						text: '烂漫',
						color: '#E11E7E',
						bgColor: '#FAF0F4'
					}],
				}, {
					"id": "166083274790266470615111",
					"goodsId": "16565533967302574095111",
					"price": 260,
					"title": "地球特派员",
					"desc": "毁灭之态，拯救地球",
					"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使。",
					"tagline": '2月14日 浪漫来袭',
					"img": "https://cdn.osisx.com/images/img3.png",
					"icon": "https://cdn.osisx.com/images/img3.png",
					"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
					"make": "迪斯尼DISENEY",
					"publish": "@MINDSPARK境由心动",
					"typeName": "探索更多",
					"tags": [{
						text: '二次元',
						color: '#4C4141',
						bgColor: '#EDEDED'
					}, {
						text: '烂漫',
						color: '#E11E7E',
						bgColor: '#FAF0F4'
					}],
				}, {
					"id": "16608327479026647061611",
					"goodsId": "1656553396730257409611",
					"price": 260,
					"title": "地球特派员",
					"desc": "毁灭之态，拯救地球",
					"detail": "一个叫埃利奥的男孩发现自己穿越了银河系，被误认为是我们地球的星际大使。",
					"tagline": '2月14日 浪漫来袭',
					"img": "https://cdn.osisx.com/images/img3.png",
					"icon": "https://cdn.osisx.com/images/img3.png",
					"link": "http://wdjqoss.hzmofeng.com/videoh5test/index.html",
					"make": "迪斯尼DISENEY",
					"publish": "@MINDSPARK境由心动",
					"typeName": "探索更多",
					"tags": [{
						text: '二次元',
						color: '#4C4141',
						bgColor: '#EDEDED'
					}, {
						text: '烂漫',
						color: '#E11E7E',
						bgColor: '#FAF0F4'
					}],
				}]
				setTimeout(() => {
					this.goodsData.push(...resultData)
					this.status = "loadmore";
				}, 500);

				// this.status = 'loading';
				// this.params.pageNumber++
				// getGoodsList(this.params).then((res) => {
				// 	let resultData = res.data.result.records
				// 	if (
				// 		resultData == [] ||
				// 		resultData == "" ||
				// 		resultData == null
				// 	) {
				// 		this.status = "noMore";
				// 		return false;
				// 	}
				// 	this.goodsData.push(...resultData);
				// 	this.status = "loadmore";
				// });
			},
		},
	};
</script>
<style lang="scss" scoped>
	.layout {
		.goods-list {
			padding: 70rpx 44rpx 44rpx 44rpx;
			width: auto;
			.goods-item {
				width: 100%;
				height: 240rpx;
				display: flex;
				// justify-content: space-between;
				margin-bottom: 16rpx;

				.goods-img {}

				.goods-desc {
					background-color: #FFFFFF;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					width: calc(100vw - 250rpx);
					border-radius: 0 8rpx 8rpx 0;
					padding: 24rpx;

					.goods-title {
						font-size: 32rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 500;
						color: #181818;
					}

					.goods-detail {
						font-size: 26rpx;
						font-family: PingFangSC, PingFang SC;
						font-weight: 300;
						color: #979797;

						overflow: hidden;
						word-break: break-all;
						text-overflow: ellipsis;
						display: -webkit-box; // 弹性伸缩盒
						-webkit-box-orient: vertical; // 设置伸缩盒子元素排列方式
						-webkit-line-clamp: 2;

					}

					.goods-actions {
						display: flex;
						justify-content: space-between;

						.tags {
							display: flex;
							align-items: center;

							.mytag {
								margin-right: 8rpx;
							}
						}

						.actions {
							display: flex;
							align-items: center;
						}
					}
				}
			}
		}
	}
</style>